<template>
	 <el-container class="chat-container">
		<el-header>Header</el-header>
		<el-main><ChatBoxMain /></el-main>
		<el-footer><ChatBoxFooter /></el-footer>
	  </el-container>
  </template>
  
<script setup>
import ChatBoxMain from './ChatBoxMain.vue'
import ChatBoxFooter from './ChatBoxFooter.vue'
const props = defineProps({
	// chat: {
	// 	type: Object,
	// 	required: true
	// }
})
const closeRefBox = () => {
	console.log('closeRefBox')
}
const readedMessage = () => {
	console.log('readedMessage')
}

</script>
<style lang="scss">
.chat-container {
  display: flex;
  flex-direction: column;
  height: 100%;
  :deep(.el-header) {
    height: 60px;
    padding: 0;
    border-bottom: 1px solid #eee;
  }

  :deep(.el-main) {
    flex: 1;
    padding: 0;
    overflow: hidden; // 防止出现双滚动条
  }

  :deep(.el-footer) {
    height: auto;
    padding: 0;
    border-top: 1px solid #eee;
  }
}
</style>
